<template>
	<view class="content">
		<view class="all-content">
			<header>
				<view class="header-wrapper">
					<view class="header-text">
						<m-skeleton :loading="loading" width="300rpx" height="30rpx">
							<view @tap="locationChange">
								<text class="iconfont icon-location w-icon"></text>
								{{ locationInfo.province }} {{ locationInfo.city }} {{ locationInfo.county }}
							</view>
						</m-skeleton>
					</view>
				</view>
			</header>
			<view class="main-wrapper">
				<view class="main-txt">
					<m-skeleton :loading="loading" width="150rpx" height="150rpx">
						<text class="txt-temperature">{{ resultData.observe.degree }}°</text>
					</m-skeleton>
					<m-skeleton :loading="loading" :left="10" width="60rpx" height="60rpx">
						<text class="txt-name">{{ resultData.observe.weather_short }}</text>
					</m-skeleton>
				</view>
				<view class="txt-other">
					<m-skeleton :loading="loading" width="500rpx" height="30rpx">
						<text class="txt-wind">东北风 {{ resultData.observe.wind_power }}级</text>
						<text class="txt-humidity">湿度 {{ resultData.observe.humidity }}%</text>
						<text class="txt-kpa">气压 {{ resultData.observe.pressure }}Hpa</text>
					</m-skeleton>
				</view>
				<view class="weather-img">
					<m-skeleton :loading="loading" width="200rpx" height="200rpx">
						<image v-if="resultData.observe.weather_code"
							:src="`//mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/currentweather/day/${resultData.observe.weather_code}.png`"
							mode=""></image>
					</m-skeleton>
				</view>
			</view>
			<view class="event_info">
				<view class="info_content" @click="toEventDetail">
					<text class="content_title" v-if="hasEvent">{{ event.eventTitle }}</text>
					<text class="content_date_time" v-if="hasEvent">{{ eventDateTime }}</text>
					<text class="content_note" v-if="hasEvent">{{ event.eventNotes }}</text>
					<text v-else>当前暂无日程安排</text>
				</view>
			</view>
			<view class="event_leave">
				<text @click="toEventList">查看更多日程</text>
			</view>
			<view class="hours-wrapper">
				<m-skeleton :loading="loading" width="100%" height="150rpx" />
				<card-block v-if="!loading" title="逐小时预报">
					<view class="hours-list">
						<view class="hours-item" v-for="(item, index) in resultData.forecast_1h" :key="index">
							<view class="item-time">{{ formatTimeToHours(item.update_time) }}</view>
							<view class="item-icon">
								<image
									:src="`//mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/day/${item.weather_code}.png`"
									mode=""></image>
							</view>
							<view class="item-degree">{{ item.degree }}°</view>
						</view>
					</view>
				</card-block>
			</view>
		</view>
		<w-picker mode="region" :defaultVal="[locationInfo.province, locationInfo.city, locationInfo.county]"
			:areaCode="areaCode" :hideArea="false" @cancel="locationCancel" @confirm="locationConfirm"
			themeColor="#659af8" ref="region"></w-picker>
	</view>
</template>

<script>
import $weatherApi from '../../api/weather';
// components
import MSkeleton from '../../components/MSkeleton/index';
import CardBlock from '../../components/CardBlock/index';
import wPicker from '../../components/w-picker/w-picker.vue';
import { getAreaCodeArr } from '../../components/w-picker/utils';
export default {
	components: {
		MSkeleton,
		wPicker,
		CardBlock
	},
	data() {
		return {
			event: null,
			loading: true,
			areaCode: ['11', '1101', '110101'],
			locationInfo: {
				province: '浙江省',
				city: '杭州市',
				county: '江干区'
			},
			defaultVal: {
				checkArr: {
					0: '浙江省',
					1: '杭州市',
					2: '江干区'
				},
				checkCode: {
					0: '33',
					1: '3301',
					2: '330104'
				},
				
				result: '浙江省杭州市江干区'
			},
			resultData: {
				forecast_1h: [],
				observe: {
					degree: 0,
					humidity: 0,
					precipitation: 0,
					pressure: 0,
					update_time: '',
					weather: '',
					weather_code: '',
					weather_short: '',
					wind_direction: '',
					wind_power: ''
				},
				tips: {
					observe: {}
				}
			},
			areaPickerInfo: {}
		};
	},
	onRead() { },
	onLoad() {
		this.getLocation();
	},
	onShow() {
		this.getEventInfo();
	},
	computed: {
		eventDateTime() {
			if (this.event == null) {
				return;
			}
			let { eventStart, eventEnd, eventDate } = this.event;
			return eventDate + "," + eventStart.slice(11, 16) + "-" + eventEnd.slice(11, 16);
		},
		hasEvent() {
			return this.event != null && !JSON.stringify(this.event) != "{}"
		},
	},
	methods: {
		toEventDetail() {
			if (this.event == null) {
				return;
			}
			for (let key in this.event) {
				if (this.event[key] == null) {
					this.event[key] = '';
				}
			}
			uni.setStorageSync('event', this.event)
			uni.navigateTo({
				url: '/pages/event/detail/index'
			})
		},
		async getEventInfo() {
			// 获取事件信息
			if (!uni.getStorageSync('token')) {
				return;
			}
			let result = await this.$API.event.getEventInfo()
			if (result.code === 200) {
				this.event = result.data;
			}
		},
		toEventList() {
			uni.switchTab({
				url: '/pages/event/list/index'
			});
		},
		getLocation() {
			let that = this;
			// #ifdef MP-WEIXIN
			this.locationConfirm(this.defaultVal);
			return
			// #endif
			uni.getLocation({
				async success(res) {
					const { latitude, longitude } = res;
					const result = await $weatherApi.getLocationDetail({
						location: `${latitude},${longitude}`,
						key: 'XJLBZ-QFTHJ-ZODFA-KNR74-WGRCO-QEB56'
					});
					console.log(result);
					let { province, city, district } = result.data.result.address_component;
					that.areaCode = getAreaCodeArr(province, city, district);
					console.log(that.areaCode);
					await that.getWeather(province, city, district);
					// that.$nextTick(()=>{
					// 	that.loading = false;
					// })
				},
				fail(err) {
					console.log('err', err);
					uni.showModal({
						content: '检测到您没打开定位权限，是否去设置打开？',
						confirmText: '确认',
						cancelText: '取消',
						success: function (res) {
							if (res.confirm) {
								// #ifdef MP-ALIPAY
								my.openSetting({
									success: res => { }
								});
								// #endif
							}
						}
					});
				}
			});
		},
		async getWeather(province, city, district) {
			try {
				this.loading = true;
				let result = await $weatherApi.getWeather({
					source: 'xw',
					weather_type: 'observe|alarm|air|forecast_1h|forecast_24h|index|limit|tips|rise',
					province: province,
					city: city,
					county: district
				});
				if (Object.keys(result.data.data.observe).length == 0) throw new Error();
				this.resultData = result.data.data;
				this.locationInfo.province = province;
				if (province == city) {
					this.locationInfo.city = '';
				} else {
					this.locationInfo.city = city;
				}
				this.locationInfo.county = district;
				this.loading = false;
			} catch (e) {
				//TODO handle the exception
				uni.showToast({
					title: '抱歉，暂无该地区天气',
					icon: 'none'
				});
				this.loading = false;
				console.log(e);
			}
		},
		locationChange() {
			this.$refs.region.show();
		},
		async locationConfirm(val) {
			console.log('local', val);
			this.areaPickerInfo = val;
			let province = this.areaPickerInfo.checkArr[0];
			let city = this.areaPickerInfo.checkArr[1];
			let county = this.areaPickerInfo.checkArr[2];
			if (this.areaPickerInfo.checkArr[1] == '市辖区' || this.areaPickerInfo.checkArr[1] == '县') {
				city = province;
			}
			await this.getWeather(province, city, county);
		},
		locationCancel() {
			this.areaPickerInfo = null;
		},
		onConfirm() { },
		formatTimeToHours(time) {
			let currentTime = time.substring(0, 10);
			let hours = currentTime.substr(-2);
			return hours + ':00';
			// return hours;
		}
	}
};
</script>

<style scoped lang="scss">
page {
	background: #f6f9fe;
}

.header-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10rpx 5rpx;
	background-color: #659af8;

	.header-text {
		font-size: 30rpx;
		color: #fff;
	}
}

.main-wrapper {
	height: 470rpx;
	padding: 0rpx 55rpx;
	background-color: #659af8;
	color: #ffffff;
	position: relative;

	.main-txt {
		.txt-temperature {
			font-size: 108rpx;
		}
	}

	.txt-other {
		margin: 25rpx 0rpx;
		font-size: 30rpx;

		text:not(:last-child) {
			margin-right: 15rpx;
		}
	}

	.txt-tips {
		position: relative;
		padding-left: 5rpx;

		.txt-info:before {
			content: '';
			float: left;
			transform: translateY(25%);
			margin-right: 13rpx;
			height: 30rpx;
			width: 30rpx;
			background: #fff;
			border-radius: 50%;
		}
	}

	.weather-img {
		position: absolute;
		bottom: 25rpx;
		right: 20rpx;

		image {
			width: 230rpx;
			height: 230rpx;
		}
	}
}

.event_leave {
	font-size: 26rpx;
	text-align: right;
	margin-right: 20rpx;
	margin-top: 20rpx;
	color: #333333;
}

.event_info {
	height: 120rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 18rpx;
	border: 1rpx solid #E0E3DA;
	box-shadow: 2rpx 6rpx 0rpx #e5e8df;
	background-color: #ffffff;
	margin: 30rpx 30rpx 0 30rpx;
	padding: 25rpx;

	.info_content {
		width: 100%;
		margin-left: 25rpx;
		display: flex;
		flex-direction: column;
	}

	.content_title {
		font-weight: bolder;
		font-size: 50rpx;
	}

	.content_note {
		font-weight: 200;
		font-size: 26rpx;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.hours-wrapper {
	margin: 5rpx 0rpx 15rpx;
	padding: 0rpx 15rpx;

	.hours-list {
		display: flex;
		overflow-x: auto;

		&::-webkit-scrollbar {
			display: none;
		}

		.hours-item {
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;

			&:not(:last-child) {
				margin-right: 55rpx;
			}

			.item-icon {
				margin: 10rpx 0rpx;

				image {
					width: 88rpx;
					height: 88rpx;
				}
			}

			.item-time {
				color: #8a9baf;
				font-size: 30rpx;
			}

			.item-degree {
				font-size: 35rpx;
			}
		}
	}
}

.living-index-wrapper {
	display: flex;
	padding: 0rpx 15rpx;
	flex-wrap: wrap;
	justify-content: space-between;

	.living-item {
		margin: 30rpx 0rpx;
		flex-basis: 48%;

		.info {
			font-size: 35rpx;
			color: black;
			text-align: center;
		}
	}

	.icon {
		height: 34px;
		width: 34px;
		display: block;
		margin: 0 auto 22rpx;
		background-image: url('http://mat1.gtimg.com/pingjs/ext2020/weather/2017/images/sprites/sprite-7d98dbada9.png');

		&.chuanyishushi {
			background-position: -80px -37px;
		}

		&.yusan {
			background-position: 0 -154px;
		}

		&.ganmao {
			background-position: -74px -154px;
		}

		&.xiche {
			background-position: -154px -111px;
		}

		&.yundong {
			background-position: -37px -43px;
		}

		&.fangsai {
			background-position: 0 -43px;
		}
	}
}

.w-icon {
	color: #ffffff;
	margin-right: 10rpx;
}
</style>
